<!DOCTYPE html>
<html>
<head lang="en">

    <title>我的订单</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="../css/shop/myshow.css">
    <script>
        function paramsMatter(value,row,index) {
            var span=document.createElement('span');
            span.setAttribute('title',value);
            span.innerHTML = value;
            return span.outerHTML;
        }

        function formatTableUnit(value, row, index) {
            return {
                css: {
                    "white-space": 'nowrap',
                    "text-overflow": 'ellipsis',
                    "overflow": 'hidden'
                }
            }
        }
    </script>
</head>
<body style="height: auto">

<div class="search-head">
    <div class="row nav-search">
        <div class="col-5">
            <a href="profiles.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <span style="text-align: center">我的订单</span>
    </div>
</div>
<div id="smaller">
    <div style="margin-bottom: 20px">
            <!--订单内容-->
    </div>
</div>
<script>
    var userStr = sessionStorage.getItem("user");
    var userId;
    if(userStr) {
        userId = JSON.parse(userStr).id
        $.get("/orderList",{userId:userId},function (data) {
           var html="";
           if(data){
               $.each(data.list,function (index,ele) {
                   html+=' <div style="margin-bottom: 20px">\n' +

                       '            <div class="row news-detail">' +

                               '         <div class="col-5">' +
                           '                  <a href="/productDetails.html?id='+ele.product.id+'">' +
                           '                            <img src="' + ele.product.img + '">' +
                           '                  </a>' +
                               '        </div>' +
                       '                <div class="col-7">' +
                       '                  <a href="/productDetails.html?id='+ele.product.id+'">' +
                       '                    <h4>'+ele.product.name+'</h4>' +
                       '                    <p>'+ele.product.intro+'</p>' +
                       '                  </a>' +
                       '               <div> ' +

                       '订单时间:<span>'+ele.creationtime+'</span></div><br/>'+
                       '积分:<span>'+ele.price+'</span>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" data-id="'+ele.product.id+'"class="btn btn-danger btn-sm estimateBtn">评价</button>&nbsp;&nbsp;<button type="button" data-id="'+ele.product.id+'"class="btn btn-danger btn-sm shopBtn">再次购买</button></div><br/>'+
                       '                    </div>'+
                       '                </div>' +
                       '            </div>' +
                       '    <hr>' +
                       '    </div>  '
               })
               $("#smaller").append(html)
               $(".shopBtn").click(function () {
                 var href="product-"
                   var id = $(this).data("id");
                  href=href+id;
                   window.location.href="/mine/product.html#"+href;
               })

               $(".estimateBtn").click(function () {
                  /* var id = $(this).data("id");
                   window.location.href="/productDetails.html?id="+id;*/
                   $(document).dialog({
                       type : 'toast',
                       infoIcon: '../img/icon/fail.png',
                       infoText: '亲.窝窝正在努力开发中',
                       autoClose: 1000
                   });
               })
           }
        })
    }else {
        window.location.href="/index.html";
    }
    //翻页函数
    var currentPage = 2;
    var totalPage = 2;//临时的总页数,先设值成2,防止第一次翻页无法进行
    function goPage() {
        $.get("/orderList",{userId:userId,currentPage:currentPage},function (data) {
            //使用定义了的变量进行运算操作，必须赋予初始值
            var html='';
            $.each(data.list,function (index,ele) {
                console.log(ele.product.id);
                html+=' <div style="margin-bottom: 20px">' +

                    '            <div class="row news-detail">' +

                    '         <div class="col-5">' +
                    '                  <a href="/productDetails.html?id='+ele.product.id+'">' +
                    '                            <img src="' + ele.product.img + '">' +
                    '                  </a>' +
                    '        </div>' +
                    '                <div class="col-7">' +
                    '                  <a href="/productDetails.html?id='+ele.product.id+'">' +
                    '                    <h4>'+ele.product.name+'</h4>' +
                    '                    <p>'+ele.product.intro+'</p>' +
                    '                  </a>' +
                    '               <div> ' +

                    '订单时间:<span>'+ele.creationtime+'</span></div><br/>'+
                    '积分:<span>'+ele.price+'</span>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" data-id="'+ele.product.id+'"class="btn btn-danger btn-sm estimateBtn">评价</button>&nbsp;&nbsp;<button type="button" data-id="'+ele.product.id+'"class="btn btn-danger btn-sm shopBtn">再次购买</button></div><br/>'+
                    '                    </div>'+
                    '                </div>' +
                    '            </div>' +
                    '    <hr>' +
                    '    </div>  '
            })
            //拼接在全部攻略对应的div中
            $("#smaller").append(html)
            currentPage+=1;
            totalPage = data.pages;
        })
    }
    //滑动分页事件
    //监视屏幕滚动，到达页尾开始翻页
    $(window).scroll(function () {
        //在推荐页时不进行操作

        if ($(window).height() + $(window).scrollTop()+1>= $(document).height()) {
            //防止无限翻页
            console.log("滑动事件");
            if (currentPage <= totalPage) {
                console.log("翻页");
                //加载第二页的数据
                goPage();
            }
        }
        //数据加载完毕，停止翻页
        if ($(window).height() + $(window).scrollTop()+1>= $(document).height() & currentPage > totalPage) {
            $(document).dialog({
                type: 'notice',
                infoText: '到底啦，扑街仔！',
                autoClose: 2500,
                position: 'bottom'  // center: 居中; bottom: 底部
            });
        }
    })
</script>
</body>
</html>